'use client'

import React from 'react'
import { useRouter } from 'next/navigation'
import { Layout, Typography, Space } from 'antd'
import RegisterForm from '../../components/RegisterForm'

const { Content } = Layout
const { Title, Paragraph } = Typography

export default function RegisterPage() {
    const router = useRouter()

    // 注册成功后的处理
    const handleRegisterSuccess = (user) => {
        // 注册成功后跳转到登录页面
        router.push('/login')
    }

    // 切换到登录页面
    const handleSwitchToLogin = () => {
        router.push('/login')
    }

    return (
        <Layout className="min-h-screen bg-gray-50">
            <Content className="flex items-center justify-center p-4">
                <div className="w-full max-w-4xl">
                    {/* 页面标题 */}
                    <div className="text-center mb-8">
                        <Title level={1} className="mb-2">
                            加入产品展示平台
                        </Title>
                        <Paragraph className="text-lg text-gray-600">
                            展示您的创意作品，与更多用户分享
                        </Paragraph>
                    </div>

                    {/* 注册表单 */}
                    <RegisterForm
                        onSuccess={handleRegisterSuccess}
                        onSwitchToLogin={handleSwitchToLogin}
                    />

                    {/* 平台介绍 */}
                    <div className="mt-12 text-center">
                        <Title level={3} className="mb-4">
                            为什么选择我们的平台？
                        </Title>
                        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-4xl mx-auto">
                            <div className="bg-white p-6 rounded-lg shadow-sm">
                                <div className="text-blue-500 text-2xl mb-3">🚀</div>
                                <Title level={4}>快速展示</Title>
                                <Paragraph className="text-gray-600">
                                    简单上传，快速展示您的网站和应用程序
                                </Paragraph>
                            </div>
                            <div className="bg-white p-6 rounded-lg shadow-sm">
                                <div className="text-green-500 text-2xl mb-3">👥</div>
                                <Title level={4}>用户互动</Title>
                                <Paragraph className="text-gray-600">
                                    与其他开发者和用户交流，获得宝贵反馈
                                </Paragraph>
                            </div>
                            <div className="bg-white p-6 rounded-lg shadow-sm">
                                <div className="text-purple-500 text-2xl mb-3">📈</div>
                                <Title level={4}>数据分析</Title>
                                <Paragraph className="text-gray-600">
                                    了解您的作品表现，优化用户体验
                                </Paragraph>
                            </div>
                        </div>
                    </div>
                </div>
            </Content>
        </Layout>
    )
}